<template>
  <div>
    <good-search-dialog v-model="dialogVisible" @select="handleDialogSelect" :data="form"/>
    <div class="title">
      <el-row :gutter="10">
        <el-col :span="6">
          <span style="border-left: 5px solid #409EFF; padding-left: 10px;">选择商品</span>
        </el-col>
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col :span="18" align="right">
          <el-button size="small" @click="toggleShowGoodInfoMore" :icon="toggleIcon"/>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="商品编号" prop="id" class="formItem">
              <el-input v-model="form['id']" placeholder="商品编号，回车进行搜索" size="small"
                        @keyup.enter.native="handleSearchById">
                <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
                   @click="openSearchDialog"/>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="name" class="formItem">
              <el-input v-model="form['name']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品分组" prop="groupName" class="formItem">
              <el-input v-model="form['groupName']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺名称" prop="storeName" class="formItem">
              <el-input v-model="form['storeName']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="商品描述" prop="simpleDesc" class="formItem">
              <el-input v-model="form['simpleDesc']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="商品买点" prop="sellPoint" class="formItem">
              <el-input v-model="form['sellPoint']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="热度得分" prop="score" class="formItem">
              <el-input v-model="form['score']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="商品运费" prop="freight" class="formItem">
              <el-input v-model="form['freight']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="创建人员" prop="createUserName" class="formItem">
              <el-input v-model="form['createUserName']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="创建时间" prop="createTime" class="formItem">
              <el-input v-model="form['createTime']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="state" class="formItem">
              <el-input v-model="form['state']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="showGoodInfoMore">
            <el-form-item label="状态备注" prop="stateDesc" class="formItem">
              <el-input v-model="form['stateDesc']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark" class="formItem">
              <el-input v-model="form['remark']" :disabled="true" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import GoodSearchDialog from '@pages/goods/part/GoodSearchDialog'
import { queryGoodDetailByIdStore } from '@/api/ApiGoodDetail'
import { ResultCode } from '@/constants/constants'
import { formatTime } from '@/utils/ConvertData'

export default {
  name: 'StoreGoodSelector',
  components: { GoodSearchDialog },
  data () {
    return {
      dialogVisible: false,
      showGoodInfoMore: false,
      queryLoading: false,
      form: {
        id: ''
      }
    }
  },
  computed: {
    toggleIcon () {
      return this.showGoodInfoMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    }
  },
  methods: {
    openSearchDialog () {
      this.dialogVisible = true
    },
    toggleShowGoodInfoMore () {
      this.showGoodInfoMore = !this.showGoodInfoMore
    },
    /**
     * 根据id搜索商品信息
     */
    handleSearchById () {
      if (this.form.id) {
        if (!/^[0-9]+$/.test(this.form.id)) {
          this.$message.error('商品编号为纯数字')
          return
        }
        this.queryLoading = true
        queryGoodDetailByIdStore(this.form.id, data => {
          if (data && data.code === ResultCode.OK) {
            data = data.object
            if (!data || typeof data !== 'object') {
              this.$message.error('商品不存在')
            }
            data['createTime'] = formatTime(data['createTime'])
            this.form = data
            this.$emit('change', data)
          }
        }, () => {
          this.queryLoading = false
        })
      }
    },
    /**
     * 对话框回调
     * @param val 对话中中选中的商品信息
     */
    handleDialogSelect (val) {
      this.form = val
      this.$emit('change', val)
    }
  }
}
</script>

<style scoped>

  .title{
    margin-bottom: 16px;
  }

  .formItem{
    margin-top: -10px;
  }

</style>
